import { Form,Input } from "antd-mobile"
import {FC,useState} from 'react'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { reg } from "../util/reg"
export const PassCom:FC<{
    label?:string,
    name?:string,
    help?:string,
    rules?:any,
    placeholder?:string
    dependencies?:string[]
}> = ({
    label='密码',
    name="password",
    help='输入6-16的数字字母组合密码',
    rules=[],
    dependencies,
    placeholder='请输入密码'
})=>{
    // 判断是否需要显示密码
    const [visible,setVisible] = useState(false)
    return (
        <Form.Item
            label={label}
            name={name}
            help={help}
            dependencies={dependencies}
            rules={[
                {required:true,message:"请输入密码"},
                {pattern:reg.pwd,message:"密码格式不正确"},
                ...rules
            ]}
            extra={
                <div className={'eye'}>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
            
        >
            <Input placeholder={placeholder} type={visible?'text':'password'}></Input>
        </Form.Item>
    )
}